require('../../less/controls/dialog.less');
var React = require('react');

module.exports = React.createClass({
	displayName:'Dialog',
	getInitialState:function(){
		return {

		}
	},
	componentDidMount:function(){

	},
	__onClose: function (){
		this.props.onClose && this.props.onClose();
	},
	render:function(){
		var _props = this.props,
			_hStyle = _props.hStyle||{},
			_fStyle = _props.fStyle||{},
			_style = _props.style||{};

		_hStyle.height = _props.hHeight;
		_fStyle.height = _props.fHeight;
		_style.zIndex = _props.zIndex;

		return (
			<div className={"c-dialog " + (_props.skin||'normal')} style={_style}>
				<div className="c-dialog-head" style={_hStyle} >
					{
						this.props.icon && <span className={"icon fa " + this.props.icon}></span>
					}
					{
						this.props.title && <span className="title">{this.props.title}</span>
					}
					{
						this.props.enableClose && <i onClick={this.__onClose} className="close fa fa-close"></i>
					}
				</div>
				<div className="c-dialog-body" style={_props.bStyle}>
					{_props.content||_props.children}
				</div>
			</div>
		);
	}
});
